<template>
  <div>
    <el-collapse value="tabConfig">
      <el-collapse-item title="公共配置" name="common">
        <el-form :model="widget.UI.data" label-width="80px" size="mini" class="pad-lft-rgt-10">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="文字颜色">
                <PopoverColor :colorValue="widget.UI.data.tabData.color">
                  <CustomColorPicker v-model="widget.UI.data.tabData.color" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选中颜色">
                <PopoverColor :colorValue="widget.UI.data.tabData.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.tabData.activeColor" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认底色">
                <PopoverColor :colorValue="widget.UI.data.tabData.backGroundColor">
                  <CustomColorPicker v-model="widget.UI.data.tabData.backGroundColor" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选中底色">
                <PopoverColor :colorValue="widget.UI.data.tabData.activeBackGroundColor">
                  <CustomColorPicker v-model="widget.UI.data.tabData.activeBackGroundColor" show-alpha>
                  </CustomColorPicker>
                </PopoverColor>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文字大小">
                <el-input-number v-model="widget.UI.data.tabData.textSize" controls-position="right"
                                 placeholder="请设置最小值" class="width-100" :min="12">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标大小">
                <el-input-number v-model="widget.UI.data.tabData.iconSize" controls-position="right"
                                 placeholder="请设置最小值" class="width-100" :min="12">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="圆角大小">
                <el-input-number v-model="widget.UI.data.tabData.radius" controls-position="right"
                                 placeholder="请设置最小值" class="width-100" :min="0">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="布局方式">
                <el-select v-model="widget.UI.data.tabData.layout"
                           placeholder="请选择默认值" class="width-100"
                           @change="tabLayoutChange">
                  <el-option label="底部" value="bottom"></el-option>
                  <el-option label="顶部" value="top"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Tab栏高度">
                <el-input-number v-model="widget.UI.data.tabSize.height" controls-position="right"
                                 placeholder="请设置最小值" class="width-100">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider></el-divider>
              <div class="mar-top-10">Tab栏偏移量</div>
              <el-row :gutter="20" class="mar-top-10 mar-btm-10">
                <el-col :span="12">
                  <div class="flex-justify-start">
                    <div class="mar-rgt-5">上</div>
                    <el-input-number
                      v-model="widget.UI.data.tabData.offset.top"
                      :disabled="widget.UI.data.tabData.layout === 'bottom'"
                      controls-position="right" size="mini"
                      placeholder="请设置偏移量" class="width-100">
                    </el-input-number>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="flex-justify-start">
                    <div class="mar-rgt-5">下</div>
                    <el-input-number
                      v-model="widget.UI.data.tabData.offset.bottom"
                      :disabled="widget.UI.data.tabData.layout === 'top'"
                      controls-position="right" size="mini"
                      placeholder="请设置偏移量" class="width-100">
                    </el-input-number>
                  </div>
                </el-col>
                <el-col :span="12" class="mar-top-10">
                  <div class="flex-justify-start">
                    <div class="mar-rgt-5">左</div>
                    <el-input-number v-model="widget.UI.data.tabData.offset.left" controls-position="right"
                                     size="mini" placeholder="请设置偏移量" class="width-100">
                    </el-input-number>
                  </div>
                </el-col>
                <el-col :span="12" class="mar-top-10">
                  <div class="flex-justify-start">
                    <div class="mar-rgt-5">右</div>
                    <el-input-number v-model="widget.UI.data.tabData.offset.right" controls-position="right"
                                     size="mini" placeholder="请设置偏移量" class="width-100">
                    </el-input-number>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="Tab配置" name="tabConfig">
        <div class="pad-lft-rgt-10">
          <draggable v-model="widget.UI.data.items" @end="onEnd" handle=".drag-mover">
            <transition-group>
              <div v-for="tab in widget.UI.data.items" :key="tab.widgetId">
                <div class="flex-com mar-btm">
                  <span class="label-title  cursor-pointer drag-mover">输入名称</span>
                  <el-input
                    v-model="tab.text"
                    placeholder="输入名称" size="mini"
                    @change="val => tabNameChange(val, tab.widgetId)"></el-input>
                  <span
                    v-if="widget.UI.data.items.length >1"
                    class="el-icon-delete cursor-pointer font-hover-danger"
                    @click="deleteTab(tab.text, tab.widgetId)"></span>
                </div>
                <div class="flex-com mar-btm">
                  <span class="label-title">选择图标</span>
                  <el-popover width="300" trigger="click" popper-class="custom-popover">
                    <div slot="reference" class="display-inline-block cursor-pointer">
                      <i v-if="tab.icon" :class="backgroundIconClass(tab.icon)"
                         class="iconfont font-size-20"></i>
                      <el-button v-else type="text" size="small">选择</el-button>
                    </div>
                    <div class="pad-all-5">
                      <IconPicker v-model="tab.icon"></IconPicker>
                    </div>
                  </el-popover>
                </div>
                <div class="divider"></div>
              </div>
            </transition-group>
          </draggable>

          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addTab">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加标签页</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import {WidgetTabBar} from "@/modules/IDE/widget/atom/widgetTabBar";
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';
  import IconPicker from "@/components/IDE/IconPicker";
  import iconfont from '@/assets/font/iconfont.json';
  import {confirmHandle} from "@/utils";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";
  import draggable from 'vuedraggable';

  export default {
    name: 'TabBarSpec',
    components: {
      CustomColorPicker, PopoverColor, IconPicker, draggable
    },
    props: {
      widget: {
        type: WidgetTabBar,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {}
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },
      backgroundIconClass() {
        return (val) => {
          const {font_class = ''} = iconfont.glyphs.find(icon => {
            return icon.unicode === val;
          }) || {};
          return `icon-${font_class}`;
        };
      },
      // TabBarSpec 中删除某个 tab 后，会物理删除 UI.data.items 中对应的元素，
      // 而 widget.children 中的删除是逻辑删除，因此需要过滤出未删除的 children，保证数据一致
    },
    methods: {
      onEnd() {
        const updatedArray = this.widget.UI.data.items.map((item, index) => {
          item.sortNo = index + 1;
          return item;
        });
        updatedArray.forEach((item, index) => {
          const widget = WidgetFactory.getWidgetById(item.widgetId);
          widget && (widget.sortNo = item.sortNo);
        });
        this.$emit('dragEvent', updatedArray);
        this.widget.children.sort((a, b) => a.sortNo - b.sortNo);
        this.$EventBus.$emit('tabSortExecute');
        this.$forceUpdate();
      },
      addTab() {
        this.$EventBus.$emit(`tabBarTabAdded-${this.widget.id}`);
      },
      deleteTab(name, childId) {
        confirmHandle({label: `确定要删除 ${name} 吗?`}).then(() => {
          this.$EventBus.$emit(`tabBarTabDeleted-${this.widget.id}`, childId);
        }).catch(() => {
        });
      },
      tabLayoutChange(layout) {
        switch (layout) {
          case 'bottom':
            this.widget.UI.data.tabData.offset.top = 0;
            break;
          case 'top':
            this.widget.UI.data.tabData.offset.bottom = 0;
            break;
          default:
            break;
        }
      },
      tabNameChange(name, widgetId) {
        // 同步标签名称至组件名称
        const widget = WidgetFactory.getWidgetById(widgetId)
        widget && (widget.name = name);
      }
    }
  };
</script>

<style scoped lang="less">
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
